<template>
  <div>
    <h1>element-plus</h1>
    <!-- 
      使用element-plus的步骤：
      官网：https://element-plus.gitee.io/zh-CN/guide/design.html
      1、完整引入
            (1)安装包管理器；npm install element-plus --save
            (2)创建app； 在入口文件 main.ts中 创建app
            (3)在main.ts中配置：
                      import ElementPlus from 'element-plus'
                      import 'element-plus/dist/index.css'

                      app.use(ElementPlus)
            (4)配置完成之后 根据官网 组件进行使用
      2、按需引入
          一、自动导入：
            (1)安装插件：npm install -D unplugin-vue-components unplugin-auto-import
            (2)将官网中显示的在webpack.config.js文件中配置的部分，复制到 vue.config.js文件中;
               注意： 以后遇到在 webpack.config.js 文件中配置的，就将其写在 vue.config.js文件 的 configureWebpack:{}中
               例如：在vue.config.js文件中这么写：
                        const AutoImport = require('unplugin-auto-import/webpack')
                        const Components = require('unplugin-vue-components/webpack')
                        const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

                        module.exports = {
                          configureWebpack: {
                              devServer: {
                                open: true,
                                port: 8081
                              },
                              plugins: [
                                    AutoImport({
                                      resolvers: [ElementPlusResolver()],
                                    }),
                                    Components({
                                      resolvers: [ElementPlusResolver()],
                                    }),
                              ],
                          }
                        }
     -->

    <!-- 通过 elementPlus中的组件创建button -->
    <el-button type="danger">自动引入的产物</el-button>
    <el-tag class="ml-2" type="success">Tag 标签</el-tag>
    <Son></Son>
    <TestVariantForm></TestVariantForm>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Son from './components/Son.vue'
import TestVariantForm from './components/TestVariantForm.vue'

export default defineComponent({
  components:{Son,
    TestVariantForm
  },
  setup() {


    return {}
  }
})
</script>

<style scoped>

</style>